<template lang="">
    <div id='ddd'>
        {{ text }}
    </div>
</template>
<script>
export default {
    data() {
        return {
            text: '我是周期组件'
        }
    }, 
    beforeCreate() {
        console.log('实例化了--beforeCreate', this.text);
        console.log('dom-beforeCreate', document.getElementById('ddd'));
    },
    created() {
        console.log('实例化了-created', this.text);
        console.log('dom-created', document.getElementById('ddd'));
    },
    mounted() {
        console.log('实例化了-mounted', this.text);
        console.log('dom-mounted', document.getElementById('ddd'));
    },
    beforeUnmount() {
        console.log('实例化了-beforeUnmount', this.text);
        console.log('dom-beforeUnmount', document.getElementById('ddd'));
    }
}
</script>
<style lang="scss" scoped>
    #ddd{
        background-color: brown;
        color: #fff;
    }
</style>